<template>
	<xn-form-container :title="formTitle" :width="700" :visible="visible" :destroy-on-close="true" @close="onClose">
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="公司名称" name="companyName">
						<a-input v-model:value="formData.companyName" placeholder="请输入公司名称" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="公司编码" name="companyCode">
						<a-input v-model:value="formData.companyCode" placeholder="请输入公司编码" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="公司英文" name="companyEnglish">
						<a-input v-model:value="formData.companyEnglish" placeholder="请输入公司英文" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="城市名称" name="city">
						<a-input v-model:value="formData.city" placeholder="请输入城市名称" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="省份简称" name="provAbbr">
						<a-input v-model:value="formData.provAbbr" placeholder="请输入省份简称" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="监督投诉电话" name="supervisionPhone">
						<a-input v-model:value="formData.supervisionPhone" placeholder="请输入监督投诉电话" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="已诉调对接案件数量" name="referredMediationCount">
						<a-input-number
							style="width: 100%"
							v-model:value="formData.referredMediationCount"
							placeholder="请输入已诉调对接案件数量"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="正在调解案件数量" name="activeMediationCount">
						<a-input-number
							style="width: 100%"
							v-model:value="formData.activeMediationCount"
							placeholder="请输入正在调解案件数量"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="已正式立案案件数量" name="filedCaseCount">
						<a-input-number
							style="width: 100%"
							v-model:value="formData.filedCaseCount"
							placeholder="请输入已正式立案案件数量"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="已判决案件数量" name="adjudicatedCaseCount">
						<a-input-number
							style="width: 100%"
							v-model:value="formData.adjudicatedCaseCount"
							placeholder="请输入已判决案件数量"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="已执行案件数量" name="enforcedCaseCount">
						<a-input-number
							style="width: 100%"
							v-model:value="formData.enforcedCaseCount"
							placeholder="请输入已执行案件数量"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="隐私声明" name="privacyPolicy">
						<a-textarea
							v-model:value="formData.privacyPolicy"
							placeholder="请输入隐私声明"
							:auto-size="{ minRows: 5, maxRows: 10 }"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="法律声明" name="legalNotice">
						<a-textarea
							v-model:value="formData.legalNotice"
							placeholder="请输入法律声明"
							:auto-size="{ minRows: 5, maxRows: 10 }"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="使用帮助" name="helpGuide">
						<a-textarea
							v-model:value="formData.helpGuide"
							placeholder="请输入使用帮助"
							:auto-size="{ minRows: 5, maxRows: 10 }"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="关于我们" name="aboutText">
						<a-textarea
							v-model:value="formData.aboutText"
							placeholder="请输入关于我们"
							:auto-size="{ minRows: 5, maxRows: 10 }"
						/>
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="备案号" name="registration">
						<a-input v-model:value="formData.registration" placeholder="请输入备案号" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="地址" name="address">
						<a-input v-model:value="formData.address" placeholder="请输入地址" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="电话" name="phone">
						<a-input v-model:value="formData.phone" placeholder="请输入电话" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="二维码" name="qrCodeUrl">
						<a-input v-model:value="formData.qrCodeUrl" placeholder="请输入二维码链接" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="域名" name="websiteUrl">
						<a-input v-model:value="formData.websiteUrl" placeholder="请输入域名" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="公章图片地址" name="officialSealUrl">
						<a-input v-model:value="formData.officialSealUrl" placeholder="请输入公章图片地址" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="微信公众号名称" name="weChatOfficialAccount">
						<a-input v-model:value="formData.weChatOfficialAccount" placeholder="请输入微信公众号名称" />
					</a-form-item>
				</a-col>
			</a-row>
			<a-row :gutter="24">
				<a-col :span="24">
					<a-form-item label="主机名" name="host">
						<a-input v-model:value="formData.host" placeholder="请输入主机名(域名中间部分)" />
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<template #footer>
			<a-button class="xn-mr8" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
		</template>
	</xn-form-container>
</template>

<script setup>
	import { reactive, ref, computed } from 'vue'
	import { required } from '@/utils/formRules'
	import configApi from '@/api/website/config/configApi'

	// 组件状态
	const visible = ref(false)
	const submitLoading = ref(false)
	const formRef = ref()
	const emit = defineEmits(['successful'])

	// 表单数据结构
	const formData = ref({
		companyName: undefined,
		companyCode: undefined,
		companyEnglish: undefined,
		city: undefined,
		provAbbr: undefined,
		supervisionPhone: undefined,
		referredMediationCount: undefined,
		activeMediationCount: undefined,
		filedCaseCount: undefined,
		adjudicatedCaseCount: undefined,
		enforcedCaseCount: undefined,
		privacyPolicy: undefined,
		legalNotice: undefined,
		helpGuide: undefined,
		aboutText: undefined,
		registration: undefined,
		address: undefined,
		phone: undefined,
		qrCodeUrl: undefined,
		websiteUrl: undefined,
		officialSealUrl: undefined,
		weChatOfficialAccount: undefined
	})

	// 验证规则
	const formRules = reactive({
		companyName: [required('公司名称')],
		companyCode: [required('公司编码')],
		companyEnglish: [required('公司英文')],
		city: [required('城市名称')],
		provAbbr: [required('省份简称')],
		supervisionPhone: [required('监督投诉电话')],
		referredMediationCount: [required('已诉调对接案件数量')],
		activeMediationCount: [required('正在调解案件数量')],
		filedCaseCount: [required('已正式立案案件数量')],
		adjudicatedCaseCount: [required('已判决案件数量')],
		enforcedCaseCount: [required('已执行案件数量')],
		privacyPolicy: [required('隐私声明')],
		legalNotice: [required('法律声明')],
		helpGuide: [required('使用帮助')],
		aboutText: [required('关于我们')],
		registration: [required('备案号')],
		address: [required('地址')],
		phone: [required('电话')],
		qrCodeUrl: [required('二维码')],
		websiteUrl: [required('域名')],
		officialSealUrl: [required('公章图片地址')],
		weChatOfficialAccount: [required('微信公众号名称')],
		host: [required('主机名')]
	})

	// 动态标题
	const formTitle = computed(() => {
		return formData.value.id ? '修改官网配置' : '新增官网配置'
	})

	const onOpen = (record) => {
		// 如果有记录，则填充表单数据（编辑模式）
		if (record) {
			formData.value = {
				...record
			}
		} else {
			// 重置表单（新增模式）
			formRef.value?.resetFields()
		}
		visible.value = true
	}

	// 表单重置
	const onClose = () => {
		formRef.value?.resetFields()
		visible.value = false
	}

	// 表单提交
	const onSubmit = () => {
		formRef.value
			.validate()
			.then(() => {
				try {
					submitLoading.value = true
					const submitData = {
						...formData.value
					}
					if (submitData.id) {
						// 如果ID不为空，调用修改接口
						configApi
							.edit(submitData)
							.then((res) => {
								emit('successful', res)
								onClose()
								submitLoading.value = false
							})
							.catch(() => {
								submitLoading.value = false
							})
					} else {
						// 如果ID为空，调用新增接口
						configApi
							.add(submitData)
							.then((res) => {
								emit('successful', res)
								onClose()
								submitLoading.value = false
							})
							.catch(() => {
								submitLoading.value = false
							})
					}
				} catch (e) {
					submitLoading.value = false
				}
			})
			.catch(() => {
				submitLoading.value = false
			})
	}
	defineExpose({
		onOpen
	})
</script>
